<template>
  <div>phone
    <Carousel autoplay v-model="value1" loop >
      <CarouselItem v-for="item in banner" :key="item.id">
        <img :src="item.image" alt=""/>
      </CarouselItem>
    </Carousel>
    <FilterMenu></FilterMenu>
    <div style="display:flex;padding:0 50px;margin-top:40px;flex-wrap:wrap;">
      <Product v-for="(item, index) in list" :key="index" :item="item"/>
    </div>
    <Page :total="30" @on-change="aa"/>
  </div>
</template>
<script>
import Product from '@/components/Product'
import FilterMenu from '@/components/FilterMenu'
import service from '@/service/index'
export default {
  name: "phone",
  data() {
    return {
      value1: 0,
      img:'',
      banner: [],
      list: []
    };
  },
  components:{
    Product,FilterMenu
  },
  created() {
    service.get("/v1/home/banner")
      .then(data => {
        console.log(data);
        this.banner = data
    });
    service.get("/v1/home/phoneList")
      .then(data => {
        console.log(data);
        this.list = data
    });
  },
  methods:{
      aa (page) {
      service.get("/v1/home/phoneList?page="+page)
      .then((res)=>{
        console.log(res)
        this.list = res
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.demo-carousel {
  height: 300px;
}
</style>
